<template>
    <a-modal
        v-model:visible="showModal"
        :title="'选择设备'"
        :width="620"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        @ok="onSubmit"
        @cancel="handleCancle"
    >
        <a-table
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :columns="columns"
            :data-source="data"
            :pagination="false"
            :scroll="{ y: 440 }"
        >
            <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                <span>{{ t(`yl.${item.slotName}`) }}</span>
            </template>
        </a-table>
        <div style="position: absolute; bottom: 16px; right: 170px">
            已选中<span style="color: #fe6700; padding: 0 5px; font-weight: bold">{{ selectedRowKeys.length }}</span
            >个设备
        </div>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';
import { encrypt } from '@/utils';
import { addMerchant, editMerchant, getMerchantFreeze, getMerchantResetPaw } from '@/api/merchant';

interface DataType {
    key: Key;
    name: string;
    age: number;
    address: string;
}

export default defineComponent({
    name: 'roleModel',
    components: {},
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
    },
    emits: ['submit', 'cancle'],
    setup(props, { emit }) {
        const { t } = useI18n();
        console.log(props);
        const showModal = computed(() => props.visible);
        const columns = [
            { slotName: 'eslDeviceCode', dataIndex: 'name', slots: { title: 'eslDeviceCode' } },
            {
                slotName: 'eslDeviceModel',
                dataIndex: 'age',
                slots: { title: 'eslDeviceModel' },
            },
        ];
        const state = reactive({
            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
        });
        const data: DataType[] = [];
        for (let i = 0; i < 46; i++) {
            data.push({
                key: i,
                name: `Edward King ${i}`,
                age: 32,
                address: `London, Park Lane no. ${i}`,
            });
        }
        onMounted(() => {});

        // 提交
        const onSubmit = async () => {};

        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };
        const onSelectChange = (selectedRowKeys: any) => {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            state.selectedRowKeys = selectedRowKeys;
        };
        return {
            t,
            onSubmit,
            showModal,
            handleCancle,
            columns,
            data,
            ...toRefs(state),
            onSelectChange,
        };
    },
});
</script>
<style lang="scss" scoped>
.dept-model {
    @include flexWrap;
    width: 100%;
    .ant-form-item {
        @include flex;
        width: 50%;
        margin-right: 0;
        padding-right: $width10;
        margin-bottom: $width8;
        :deep .ant-form-item-label {
            flex-basis: $formLabel;
        }
        :deep .ant-form-item-control-wrapper {
            flex: 1;
        }
        :deep .ant-form-item-children,
        :deep .ant-input-number {
            width: 100%;
        }
        &.full-width {
            width: 100%;
        }
    }
}
</style>
